<template>
<div id="app">
    <div v-show="isShow">
        <p>清空未读</p>
        <ul>
            <li @click="xitong"><img src="../../assets/message-img/xitongxiaoxi.png">系统消息<span class="fa fa-angle-right"></span></li>
            <li @click="youhui"><img src="../../assets/message-img/youhuicuxiao.png">优惠促销<span class="fa fa-angle-right"></span></li>
            <li @click="shenghuo"><img src="../../assets/message-img/shenghuohao.png">生活号<span class="fa fa-angle-right"></span></li>
        </ul>
    </div>
    <van-dialog v-model="show" title="请先登录" @confirm="ok" @cancel="cancel" show-cancel-button></van-dialog>
</div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            isShow:false,
            token:"",
            show:false
        }
    },
    created() {
        this.token=localStorage.getItem("token");
        // console.log(this.token);
        if(this.token==null){
            this.show=true;
        }else{
            this.isShow=true;
        }
    },
  
     
methods: {
    xitong(){
        this.$router.push({
        path:"/xitongxiaoxi"
      })

    },
    youhui(){
        this.$router.push({
        path:"/youhuicuxiao"
      })

    },
    shenghuo(){
        this.$router.push({
        path:"/shenghuohao"
      })

    },

        ...mapMutations("login",["login"]),
        xitong(){
            console.log(123);
            this.$router.push({
            path:"/xitongxiaoxi"
        })

        },
        youhui(){
            console.log(123);
            this.$router.push({
            path:"/youhuicuxiao"
        })

        },
        shenghuo(){
            console.log(123);
            this.$router.push({
            path:"/shenghuohao"
        })

        },
        cancel(){
            this.$router.back();
        },
        ok(){
            this.$router.push("/denglu")
        }
    },

}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: hidden;
    /* height: 100%; */
}
#app{
    height: 100%;
}
p{
    width: 0.5rem; 
    height: 0.52rem;
    font-size: 0.12rem;
    margin-left: 3rem;
    margin-top: 0.3rem;
}
li{
    width: 100%;
    height:0.73rem ;
    font-size: 16px;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #f7f7f7;
    padding-left: 0.1rem;
    padding-top: 0.07rem;
}
img{
    vertical-align:middle;
    margin-right: 0.2rem;
}
span{
    display: inline-block;
    padding-left: 2rem;
    padding-top: 0.1rem;
    font-size: 0.3rem;
}
ul>li:last-child span{
    padding-left: 2.15rem;

}
</style>